<template>
  <a-layout-header :class="['admin-header', isMobile?'dark':'light']" >
    <div class="admin-header-wrapper">
      <div v-if="!isMobile">
        <menu-unfold-outlined
          v-if="collapsed"
          class="trigger"
          @click="onCollapsedChange"
        />
        <menu-fold-outlined v-else class="trigger" @click="onCollapsedChange" />
      </div>
      <div v-else>
        <img class="mobileLogo" data-v-a8317fe8="" src="">
      </div>
      <headerAvater />
    </div>
  </a-layout-header>
</template>

<script setup>
import {defineProps, toRefs, defineEmits, computed} from 'vue'
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
import { useStore } from 'vuex';
import headerAvater from './header-avater.vue';

const store = useStore()
const isMobile = computed(()=>store.getters['setting/isMobile'])

const props = defineProps({
  collapsed:Boolean
})
const {collapsed} = toRefs(props)

const emits = defineEmits(['update:collapsed'])
const onCollapsedChange = () => {
  emits('update:collapsed', !collapsed.value)
}
</script>

<style lang="less" scoped>
.admin-header{
  background: #fff;
  padding: 0 12px 0 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  .trigger{
    font-size: 20px;
  }
  &.dark{
    background: #001529;
    color: white;
  }
  .mobileLogo{
    width: 32px;
  }
  .admin-header-wrapper{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>